<template>
  <div class="video-list">
    <div class="search-bar">
      <el-form :inline="true" :model="formMode">
        <el-form-item>
          <el-select
            v-model="formMode.videoType"
            placeholder="请选择菜单名称"
            clearable
          >
            <el-option
              v-for="item in videoMenuOptions"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            style="width: 400px;"
            v-model="formMode.videoName"
            clearable
            placeholder="请输入你想查找的..."
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gutter-bar"></div>
    <main>
      <div class="video-item" v-for="(item, index) in list" :key="index">
        <video :src="item.videoUrl" controls="controls"></video>
        <div class="video-bottom-box">
          <h3 class="video-title">{{ item.videoName.replace(/.mp4/, '') }}</h3>
          <!--          <div class="introduction">-->
          <!--            <span>电子签章电子签章电子签章</span> <span>2020-09-21</span>-->
          <!--          </div>-->
        </div>
      </div>
    </main>
    <footer>
      <el-pagination
        v-show="list && list.length"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :total="total"
      >
      </el-pagination>
    </footer>
  </div>
</template>

<script>
import {
  workbenchTrainVideoageList,
  workbenchTrainVideoFindVideoMenuName
} from '@const/mDataCenterApi.js'
export default {
  name: 'VideoList',
  components: {},
  data() {
    return {
      currentPage: 1,
      pageSize: 12,
      total: 10,
      list: [],
      formMode: {
        videoType: '',
        videoName: ''
      },
      videoMenuOptions: []
    }
  },
  created() {
    this.initLayout()
    this.getVideoMenuOptions()
    this.search()
  },
  methods: {
    // 初始化右上角的按钮
    initLayout() {
      let obj = {
        type: 'btn',
        arr: [
          {
            val: '返回',
            icon: 'el-icon-arrow-left',
            handle: this.back
          }
        ]
      }
      this.$store.commit('changeLayoutHandle', obj)
    },
    back() {
      this.$router.go(-1)
    },
    // 获取菜单下拉
    getVideoMenuOptions() {
      this.$axios({
        url: workbenchTrainVideoFindVideoMenuName,
        method: 'post'
      })
        .then(res => {
          if (res.data.code === '0') {
            this.videoMenuOptions = res.data.payload || []
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取列表数据
    getListData() {
      this.$axios({
        url: workbenchTrainVideoageList,
        data: {
          page: this.currentPage,
          pageSize: this.pageSize,
          ...this.formMode
        },
        method: 'post'
      })
        .then(res => {
          this.list = res.data.payload.content || []
          this.total = res.data.payload.totalElements || 0
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 查询
    search() {
      this.currentPage = 1
      this.getListData()
    },
    // 分页查询
    handleCurrentChange() {
      this.getListData()
    }
  }
}
</script>

<style scoped lang="less">
.gutter-bar {
  height: 8px;
  background: #f0f2f5;
}
.video-list {
  padding: 0 !important;
  position: unset !important;

  .search-bar {
    padding: 8px 8px 0 8px;
    margin-bottom: -2px;
    box-sizing: border-box;
  }
  main {
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  .video-item {
    width: 32%;
    padding: 5px;
    border: 1px solid #f0f2f5;
    box-sizing: border-box;
    margin: 0 2% 16px 0;
    &:nth-child(3n) {
      margin-right: 0;
    }
    video {
      width: 100%;
      height: 240px;
    }
    .video-bottom-box {
      padding: 16px 16px 0 0;
      box-sizing: border-box;
    }
    .video-title {
      margin-bottom: 8px;
    }
    .introduction {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  footer {
    padding: 24px 0;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
